<template>
  <div class="attribute">
    <a-card
      title="系统属性"
      :bordered="false"
      :headStyle="{ padding: '0 15px', border:0}"
      :style="{ marginTop: '20px' }"
      style="width:100%"
      :tab-list="tabListNoTitle"
      :active-tab-key="noTitleKey"
      @tabChange="key => onTabChange(key, 'noTitleKey')"
      disaster
    >
      <div v-if="noTitleKey === 'article'">
        <a-table
          row-key="index"
          size="small"
          :columns="systemColumns"
          :dataSource="systemData"
          :pagination="{ pageSize: 4 }"
        >
        </a-table>
      </div>
      <p v-else-if="noTitleKey === 'app'">
        业务信息
      </p>
      <p v-else-if="noTitleKey === 'project'">
        运维信息
      </p>
      <p v-else>
        融灾信息
      </p>
    </a-card>
    <a-card title="系统评分" :bordered="false" :headStyle="{ padding: '0 15px', border:0}" :style="{ marginTop: '20px' }" style="width:100%">
      <div class="scoreinfo">
        <ul class="syslabel-list">
          <li class="label-success">交易量大</li>
          <li class="label-success" style="font-size: 30px; left: 10%; top: 33%;">运行良好</li>
          <li class="label-info">资源空间小</li>
          <li class="label-primary" style="left: 60%; top: 20%;">CPU使用率过高</li>
          <li class="label-warning">订单耗时长</li>
          <li class="label-danger">交易并发</li>
          <li class="label-primary">点对点服务</li>
        </ul>
      </div>
    </a-card>
  </div>

</template>

<script>
export default {
  name: 'SystemAttribute',
  data () {
    return {
      systemData: [],
      tabListNoTitle: [
        {
          key: 'article',
          tab: '基本信息'
        },
        {
          key: 'app',
          tab: '业务信息'
        },
        {
          key: 'project',
          tab: '运维信息'
        },
        {
          key: 'disaster',
          tab: '融灾信息'
        }
      ],
      systemColumns: [
        {
          dataIndex: 'index',
          title: '排名',
          width: 90
        },
        {
          dataIndex: 'name',
          title: '系统名称'
        },
        {
          dataIndex: 'range',
          title: '属性',
          align: 'right',
          sorter: (a, b) => a.range - b.range,
          scopedSlots: { customRender: 'range' }
        }
      ],
      key: 'tab',
      noTitleKey: 'article'
    }
  },
  created () {
    this.getSystemData()
  },
  methods: {
    /***
     * 切换选项卡
     */
    onTabChange (key, type) {
      console.log(key, type)
      this[type] = key
    },
    /***
     * 系统数据
     */
    getSystemData () {
      for (let i = 0; i < 50; i += 1) {
        this.systemData.push({
          index: i + 1,
          name: `系统-${i}`,
          count: Math.floor(Math.random() * 1000),
          range: Math.floor(Math.random() * 100),
          status: Math.floor((Math.random() * 10) % 2)
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.attribute{
  /deep/ .ant-tabs-tab{
    text-align: center;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
    padding:10px 16px;
  }
  .ant-card{
    /deep/ .ant-card-body{
      padding: 5px 15px;
      .ant-table-tbody{
        td{
          padding: 5px 8px!important;
        }
      }
    }
  }
  /deep/ .ant-table-small{
    border:0;
  }
  
  .syslabel-list{
    position: relative;
    height: 180px;
    li{
      list-style: none;
      font-size: 13px;
      position: absolute;
    }
    .label-success{
      color: #67c23a;
      left: 30%;
      top: 50%;
    }
    .label-info{
      color: #909399;
      left: 80%;
      top: 60%;
    }
    .label-warning{
      color: #e6a23c;
      font-size: 20px;
      left: 50%;
      top: 30%;
    }
    .label-danger{
      color: #f56c6c;
      font-size: 22px;
      left: 30%;
      top: 40%;
    }
  }
}
</style>
